import React, { memo, useState } from "react";
import { Layout, Space, Button, Menu ,} from "antd";
import {Outlet, useNavigate} from "react-router-dom"
import {
  SettingOutlined,
  AppstoreOutlined,
  AccountBookOutlined,
} from "@ant-design/icons";
const { Header, Footer, Sider, Content } = Layout;
const headerStyle = {
  textAlign: "center",
  height: 64,
  paddingInline: 50,
  lineHeight: "64px",
  backgroundColor:"lightblue"
};
const footerStyle = {
  textAlign: "center",
  backgroundColor:"lightblue"
};
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
// Menu菜单配置：key + label
const items = [
  getItem("首页", "/home/index", <AppstoreOutlined />),
  getItem("商品", "/cart", <SettingOutlined />, [
    getItem("商品列表", "/home/cart", <AccountBookOutlined />),
  ]),
];
const rootSubmenuKeys = ["/home", "/cart"];
const Home = memo(() => {
  const navigate = useNavigate()
  const [openKeys, setOpenKeys] = useState(["/home/index"]);
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    }else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };
  return (
    <Layout className="home">
      <Sider>
        <Menu
          theme="dark"
          mode="inline"
          items={items}
          defaultSelectedKeys={["/home/index"]}
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          onClick={(obj)=>{
            navigate(obj.key)
          }}
        ></Menu>
      </Sider>
      <Layout>
        <Header style={headerStyle}>后台管理系统</Header>
        <Content><Outlet></Outlet></Content>
        <Footer style={footerStyle}>Ant Design</Footer>
      </Layout>
    </Layout>
  );
});

export default Home;
